// import cssString from "./style.js";
const cssString = `
  #main {
    position: absolute;
    background: #392939;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.7);
    top: 50%;
    z-index: 1;
    animation: wave 2s infinite;
  }
  #backgroundDiv{
    position: absolute;
    background: #8b6283;
    height: 350px;
    width: 350px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.7);
    top: 50%;
    filter: blur(50px);
    animation: light 10s infinite alternate-reverse;
  }
  @media (min-width: 500px) {
    #main {
      transform: translateX(-50%) translateY(-50%) scale(1);
      top: 50%;
    }
    #backgroundDiv {
      transform: translateX(-50%) translateY(-50%) scale(1);
    }
  }
  
  #eyes {
    position: absolute;
    z-index: 5;
    left: 50%;
  }
  
  .eyePit {
    border-bottom: 3px solid black;
    width: 160px;
    height: 102px;
    border-radius: 50px/8px;
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-112%) translateY(20%) rotate(-148deg);
    overflow: hidden;
  }
  
  .eyePit::before {
    content: "";
    position: absolute;
    width: 159px;
    height: 110px;
    background: white;
    top: 45px;
    border: 1px solid black;
    transform: rotate(46deg);
    border-radius: 50%;
  }
  
  .leftEyePit::before {
    box-shadow: inset -24px 16px 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .rightEyePit::before {
    box-shadow: inset 3px -11px 2px 1px rgba(0, 0, 0, 0.1);
  }
  
  #mirror {
    transform: rotateY(180deg);
  }
  
  .eyeBall {
    position: absolute;
    width: 3px;
    height: 10px;
    background: black;
    border-radius: 50%;
    top: 120px;
  }
  
  .leftEyeBall {
    right: 40px;
  }
  
  .rightEyeBall {
    left: 40px;
  }
  
  #mouthUp {
    background: #de5239;
    width: 165px;
    height: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 120px;
    border-radius: 50%;
    z-index: 2;
  }
  
  #mouthDown {
    background: #392939;
    width: 205px;
    height: 100px;
    top: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 4;
    
  }
  
  .tooth {
    background: white;
    width: 40px;
    height: 40px;
    position: absolute;
    border: 1px solid black;
    top: 152px;
    z-index: 3;
  }
  
  .tooth1st {
    transform: rotate(60deg) skew(30deg);
    left: 50px;
  }
  
  .tooth2nd {
    transform: rotate(240deg) skew(30deg);
    right: 50px;
  }
  
  @keyframes wave {
    0% {
        transform: translateX(-50%) translateY(-50%) scale(0.7);
    }
    50% {
        transform: translateX(-50%) translateY(-52%) scale(0.71);
    }
    100% {
        transform: translateX(-50%) translateY(-50%) scale(0.7);
    }
  }
  
 @keyframes light {
   0% {
    filter: blur(50px);
    width:350px;
    height:350px;
   }
   50%{
    filter: blur(30px);
    width:300px;
    height:300px;
   }
   100% {
    filter: blur(50px);
    width:350px;
    height:350px;
   }
 }
  @media (min-width: 500px) {
    @keyframes wave {
      0% {
        transform: translateX(-50%) translateY(-50%) scale(1);
      }
      50% {
        transform: translateX(-50%) translateY(-52%) scale(1.05);
      }
      100% {
        transform: translateX(-50%) translateY(-50%) scale(1);
      }
    }
  }
  `;

// export default cssString;

const $text = $("#text");
const $style = $("<style>");
//实际使用的css,用于插入到head中
let i = 0;
//与cssString比较，用于substring(0, i)
let t;
//用于命名setTimeout 以便进行clearTimeout
let k = false;
//用于判断是否在播放，若在播放，再点击则播放无效 默认false 播放时为true
let time = 50;

const player = {
    init: () => {
        $("head").append($style);
        player.run();
        player.blindEvents();
    },

    hash: {
        ".stop": "pause",
        ".continue": "continue",
        ".slow": "slow",
        ".normal": "normal",
        ".fast": "fast",
    },

    blindEvents: () => {
        for (let key in player["hash"]) {
            if (player.hash.hasOwnProperty(key)) {
                const value = player.hash[key];
                $(`${key}`).on("click", player[value]);
            }
        }
    },

    run: () => {
        $text[0].innerText = cssString.substring(0, i);
        $style[0].innerHTML = cssString.substring(0, i);
        i++;
        //往textDiv和head中写css
        k = true;
        $("#textDiv")[0].scrollTop = $("#textDiv")[0].scrollHeight;
        //往下滚动
        i < cssString.length
            ? (t = setTimeout(player.run, time))
            : //cssString没读完就继续读
            ($text[0].innerHTML = cssString);
        //cssString读完了就一直显示cssString，防止点击播放出现undefined
    },
    //使用setTimeout模拟setInterval 播放动画

    pause: () => {
        clearTimeout(t);
        k = false;
    },

    continue: () => {
        if (k) {
        } else player.run();
        //未播放完成 继续播放
        k === true && i >= cssString.length ? location.reload() : undefined;
        //播放完成 刷新页面
    },

    slow: () => {
        player.pause();
        time = 100;
        player.run();
    },

    normal: () => {
        player.pause();
        time = 50;
        player.run();
    },

    fast: () => {
        player.pause();
        time = 0;
        player.run();
    },
};
player.init();